<div class="query-builder">
	<form [formGroup]="searchForm" class="h" nz-form>
		<div class="flex w align-items-center h">
			<div class="col-1-4 col-1-4-md">
				<div class="flex">
					<button (click)="search()" class="mr10" nz-button nzType="primary">搜索</button>
					<button (click)="reset()" class="mr10" nz-button nzType="default">重置</button>
				</div>
			</div>
		</div>
		<div class="flex w align-items-center h mt-[10px]">
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>区域</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select (ngModelChange)="setPositionList($event)" formControlName="areaId" [nzShowSearch]="true" nzAllowClear>
							<nz-option *ngFor="let item of locationList" [nzLabel]="item?.name" [nzValue]="item?.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>货场</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="positionId" [nzShowSearch]="true" nzAllowClear>
							<nz-option *ngFor="let item of positionList" [nzLabel]="item?.name" [nzValue]="item?.id"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>单号</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="transportBillId" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of billList" [nzValue]="item!.transportBillId"
												 [nzLabel]="item!.billNo"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>货名</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="cargoType" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of cargoTypeList" [nzValue]="item!.code"
												 [nzLabel]="item!.nameWithPinyin"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
		<div class="flex w align-items-center h mt-[10px]">
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>货主</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="cargoOwner" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of cargoOwnerList" [nzValue]="item!.clientCode" [nzLabel]="item!.nameWithPinyin"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div class="col-1-4 col-1-4-md">
				<nz-form-item nzFlex>
					<nz-form-label>货代</nz-form-label>
					<nz-form-control class="flex1">
						<nz-select formControlName="cargoAgent" nzShowSearch nzAllowClear>
							<nz-option *ngFor="let item of cargoAgentList" [nzValue]="item!.clientCode" [nzLabel]="item!.nameWithPinyin"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
	</form>
</div>
<nz-card [nzBodyStyle]="{ padding: '12px 12px 0px 12px' }" [nzBordered]="false" class="card-table">
	<st
		#st
		[size]="'small'"
		class="hover-table fix-table st-odd-table"
		[scroll]="{ y: 'calc(100vh - 265px)' }"
		[data]="dataList"
		[columns]="columns"
		[page]="pageSetting"
		[total]="this.pageInfo.total"
		[ps]="this.pageInfo.size"
		[pi]="this.pageInfo.current"
		[loading]="this.pageInfo.loading"
		(change)="stChange($event)"
		[clickRowClassName]="sa"
	>
	</st>
</nz-card>
